<script lang='ts' setup>
import { Edit, Delete, Plus } from '@element-plus/icons-vue'
import drag from '../container/fat-form-create-drag-container-type.vue';
import { FormItem } from '../hook';
import {  EFormItemInput, EFormItemSelect, EFormItemContainer } from '../enum'
import { IFormItem } from '../type'

// 遍历EFormItemInput, EFormItemSelect, EFormItemContainer，生成三个数组，包含键值对，其中键的字段名为type,值的字段名为label,索引为i
const inputType = Object.entries(EFormItemInput).map(([type, label], i) => ({ type, label, i }));
const selectType = Object.entries(EFormItemSelect).map(([type, label], i) => ({ type, label, i }));
const layoutType = Object.entries(EFormItemContainer).map(([type, label], i) => ({ type, label, i }));


onMounted(() => {
})

function handleCopy(typeItem: IFormItem) {
  return new FormItem(typeItem)
}
</script>
<template>
  <!-- 左侧list -->
  <el-card body-style="height: calc(100vh - 32px);overflow-y:auto;">
    <div class="type-title">输入型组件</div>
    <drag :list="inputType" :clone="handleCopy" item-key="i" class="type-container">
    </drag>
    <div class="type-title">选择型组件</div>
    <drag :list="selectType" :clone="handleCopy" item-key="i" class="type-container">
    </drag>
    <div class="type-title">布局型组件</div>
    <drag :list="layoutType" :clone="handleCopy" item-key="i" class="type-container">
    </drag>
  </el-card>
</template>

<style lang='scss' scoped>
.type-title {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 4px;
}

.type-container {
  display: grid;
  grid-template-columns: 140px 140px;
  column-gap: 14px;
  place-content: center;
  margin-bottom: 20px;

  .type-drag {
    width: 100px;
    margin: 4px 0;
  }
}
</style>